header{
    .header-main-container{
        margin-top: 1rem;
        .nav-item:hover{
            a{
                color:rgb(255,112,0);
            }
        }

        .nav-pos{
            position: relative;
        }

        .top-tip{
            position: absolute;
            height: 1.3rem;
            width: 4rem;
            background-size: auto 100%;
            background-repeat: no-repeat;
            top: -1.2rem;
            left: 3rem;
        }

        .ad-design{
            background-image: url(../images/背景元素.png);
        }

        .office-documents{
            background-image: url(../images/PPT.png);
        }

        .decorative-model{
            background-image: url(../images/文化墙.png);
        }

        .active{
            a{
                color: rgb(255,112,0) !important;
            }
        }

        .split-line{
            width: .1rem;
            height: 100%;
            background-color: #ccc;
        }

        a[data-spot="企业VIP"],a[data-spot="个人VIP"]{
            font-size: 12px;
            &:hover{
                color: #000 !important;
            }
        }

        .icon-company{
            background-image: url(../images/企业VIP.png);
        }

        .icon-person{
            background-image: url(../images/个人VIP.png);
        }

        .icon-company,.icon-person{
            display: block;
            width: 2rem;
            height: 2rem;
            background-size: 100% auto;
            margin: 0 auto;
        }

        .commonly-used{
            padding: .5rem 0 .5rem 1rem;
            a{
                font-size: 12px;
                color: #87888b;
                &:hover{
                    color: rgb(255,112,0);
                }
            }
            .commonly-item{
                margin-left: 1.5rem;
                
                &:nth-child(1) a{
                    color: #b18622 !important;
                }
            }
        }

        #carouselExampleIndicators{
            margin: .5rem 1rem;
            border-radius: .5rem;
        }

        .slide-ai-logo{
            z-index: 99;
            width: 15%;
            top: 0;
            right: 1rem;
        }

        .overseas-material{
            bottom: 0;
            right: 0;
            width: 30%;
        }
    }
}


header,main{
    .search{
        width: 100%;
        background-color: #f6f7f9;
        border: none;
        color: #33383f;
        padding: .5rem 1.5rem;
    }

    .icon-sousuo{
        position: absolute;
        width: 10%;
        right: 0;
        background-image: linear-gradient(to right , rgb(255,173,66) , rgb(255,117,2));
        font-size: 1.8rem;
        color: #fff;
        &:hover{
            background: rgb(255,173,66) ;
            cursor: pointer;
        }
    }
    
    .icon-xiangji{
        font-size: 1.8rem;
        position: absolute;
        right: 12%;
        height: 100%;
        color: #666;
        vertical-align: center;
        &:hover{
            color: rgb(255,173,66);
        }
    }
    
    .icon-sousuo,.icon-xiangji{
        top: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-btn{ 
        color: #ff8a00;
        border: 1px solid #ff8a00;
        &:hover{
            background-image: linear-gradient(to right , rgb(255,173,66) , rgb(255,117,2));
            color: #fff;
        }
    }
}


main{
    /* 滚动200出现顶部导航 */
    .top-nav-bar{
        display: none;
        top: 0;
        width: 100%;
        z-index: 100;
        .top-nav-main{
            color: #666;
        }
        .icon-sousuo{
            height: 2.5rem;
            top: .6rem;
            right: 0;
            width: 20%;
        }
        .icon-xiangji{
            right: 21%;
        }
    }

    /*右边固定侧边栏*/
    .right-nav-bar{
        height: 100vh;
        width: 3rem;
        top: 0;
        right: 0;
        z-index: 102;
        ul{
            padding: 3rem 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .nav-bar-item{
            padding: .5rem 0;
            border-top: .1px solid #ddd;
            img{
                width: 60%;
                margin: 0 auto;
            }
            &:hover .right-to-left-silde-son{
                right: 3rem;
            }
        }
        .right-to-left-silde-son{
            width: 20rem;
            top: -2rem;
            right: -20rem;
            z-index:-1;
            img{
                width: 95%;
                margin-bottom: .5rem;
            }
            transition: right .5s;
        }
    }

    .right-nav-bar,.left-nav-bar{
        a{
            display: block;
            text-align: center;
            font-size: .8rem;
            color: #666;
            .iconfont{
                font-size: 1rem;
            }
            &:hover{
                color: #ff8a00;
            }
        }
    }

    /*左边固定侧边栏*/
    .left-nav-bar{
        left: 5%;
        top: 10vh;
        z-index: 99;
        height: 80vh;
        padding: 3vh 1vh 0 1vh;
        display: none;
        .nav-bar-item{
            padding: 1vh 0;
            &:nth-child(4){
                i{
                    margin-left: 1vh;
                }
            }
        }
        a{
            .iconfont{
                font-size: 1.6rem;
            }
        }
    }

    /* 顶层登录窗 */
    .top-login{
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,.3);
        top: 0;
        left: 0;
        z-index: 102;
        display: none;
        justify-content: center;
        align-items: center;

        .login-main{
            width: 50%;
            background-color: #fff;
            height: 60%;
            padding: 1vh;
        }
        .login-ibaotu-logo{
            width: 30%;
            margin: 2vh 0 5vh 0;
        }
        .login-tip{
            font-size: 12px;
            color: #666;
        }
        .login-item{
            text-align: center;
            margin: 5vh 3vh;
            a{
                &:hover{
                    color: #000;
                }
            }
        }
        .login-item-icon{
            display: block;
            height: 15vh;
            width: 15vh;
            font-size: 8vh;
            text-align: center;
            line-height: 15vh;
            border: .1px solid #e1e1e1;
        }
        .login-item-txt{
            color: #666;
        }
        .wechart{
            color: #23bf36;
            &:hover{
                background-color: #23bf36;
                color: #fff;
            }
        }
        .qq{
            color: #1296db;
            &:hover{
                color: #fff;
                background-color: #1296db;
            }
        }
        .phone{
            color: #ff9100;
            &:hover{
                color: #fff;
                background-color: #ff9100;
            }
        }
        .check-for-login{
            color: #666;
            font-size: 12px;
            text-align: center;
        }
        #login-check{
            display: inline-block;
            top: 2.5px;
            left: -15.5px;
            &:checked::before{
                color: #ff9100 !important;
            }
        }
    }

    .card-item{
        width: 23%;
        a{
            width: 100%;
        }
        img{
            width: 100%;
            transition: transform 1s;
        }
        &:hover{
            img{
                transform: scale(1.2);
            }
        }
        .item-content{
            z-index: 99;
            top: 5%;
            left: 5%;
            color: #fff;
            span{
                display: block;
            }
            .item-line{
                height: .1rem;
                width: 25%;
                margin: .5rem 0;
                background-color: #fff;
            }
            .item-title{
                font-size: 1.4rem;
            }

            .item-small-title{
                font-size: 1rem;
            }
        }
    }

    .ad-design-container,.office-container{
        background-color: rgb(250,250,250);
    }

    .ad-design-container,.e-commerce-container,.office-container{
        padding: 1rem 0;
        .module-title{
            text-align: center;
            color: #333;
        }
        .module-main-title{
            a{
                color: #ff8a00;
            }
        }
        .module-small-title{
            position: relative;
            display: inline-block;
            padding: .5rem 0;

            &::before,&::after{
                content: '';
                position: absolute;
                width: 50%;
                height: .1px;
                z-index: 100;
                background-color: #333;
                top: 50%;
            }
            &::before{
                left: -51%;
            }
            &::after{
                right: -51%;
            }
        }
        ul{
            flex-wrap: wrap;
        }
        .module-item{
            margin-bottom: 1rem;
            width: 23%;
            img{
                width: 100%;
            }
            &:hover .module-item-title{
                top: 0;
            }
            &:hover .module-item-btn{
                bottom: 0;
            }
        }

        .module-item-title{
            height: 20%;
            top: -20%;
            background-image: linear-gradient(180deg,rgb(100,100,100,.1),transparent);
            color: #fff;
            padding: 5% 0 0 5%;
            transition: top .5s;
        }
        
        .module-item-btn{
            height: 30%;
            bottom: -30%;
            background-image: linear-gradient(0,rgb(100,100,100,.1),transparent);
            transition: bottom .5s;
            button{
                width: 80%;
                background-image: linear-gradient(to right , rgb(254,180,42) , rgb(242,139,47));
            }
        }
    }

}

footer{
    .who-select-our-site{
        color: #666;
        .select-our-site-title{
            font-size: 1.4rem;
            margin: 2rem 0;
        }
        .select-item{
            img{
                width: 20%;
                margin: 0 auto;
            }
            .selector-item-content{
                text-align: center;
            }
            .selector-name{
                margin-top: .5rem;
            }
            .selector-name,.selector-product{
                display: block;
                font-weight: bold;
            }
            .selector-evaluate{
                margin-top: .8rem;
            }
        }
        .join-us{
            img{
                width: 30%;
            }
            margin: 1rem 0;
        }
    }
    .friendly-links{
        .tab-content{
            li{
                display: inline-block;
                margin-left: .5rem;
            }
            a{
                font-size: .8rem;
                color: #666;
                &:hover{
                    color: #ff8a00;
                }
            }
        }
    }
    .worry-free{
        .col-md-2{
            text-align: center;
        }
        img{
            width: 30%;
            margin: 0 auto;
        }
        span{
            display: block;
            color: #666;
        }
        .row{
            margin: 2rem 0;
        }
    }
    .site-information{
        background-color: rgb(250,250,250);
        padding: 3rem 0;
        font-size: 13px;
        .logo-img{
            width: 60%;
        }
        .item-line{
            width: .1rem;
            height: 50%;
            background-color: #ddd;
        }
        a{
            color: #999;
            margin-right: .5rem;
            &:hover{
                color: #ff8a00;
            }
        }
        .record-info{
            margin-top: 3rem;
            color: #999;
            text-align: center;
        }
    }
}

.icon-common{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-image: url(../images/sp_public.png);
    cursor: pointer;
}

.icon-guohui{
    background-position:  -235px -40px;
}

.icon-jinghui{
    background-position:  -220px -40px;
}

.icon-shanghaigongshang{
    background-position:  -385px -1px;
    
}